<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Metadata Selection Form</title>
    <style>
      /* Basic styling for a clean and modern look */
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f7f8;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .form-container {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        width: 100%;
      }
      h2 {
        text-align: center;
        color: #333333;
        margin-bottom: 20px;
      }
      label {
        font-size: 0.9em;
        color: #555555;
        margin-bottom: 5px;
        display: block;
      }
      select {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #dddddd;
        border-radius: 4px;
        font-size: 1em;
      }
      button {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        font-size: 1em;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      button:hover {
        background-color: #0056b3;
      }

    /* 输入框样式 */
    input[type="text"],
      input[type="password"] {
          width: 100%;
          padding: 10px;
          margin-bottom: 15px;
          border: 1px solid #ccc;
          border-radius: 5px;
      }

      /* 密码输入框相关的容器样式 */
      .relative-container {
          position: relative;
      }

      /* 眼睛图标样式 */      
      .eye-icon {
          position: absolute;
          top: 12px;
          right: 10px;
          cursor: pointer;
          color: #777;
      }
    </style>
  </head>
  <body>
    <div class="form-container">
      <h2>Configuration WiFi

      </h2>

      

      <form id="wifiForm" onsubmit="ConnectWifi(event)">
        <label for="ssid">SSID (WiFi名称):</label><br>
        <input type="text" id="ssid" name="ssid"><br>
        <label for="password">Password (WiFi密码):</label><br>
            <div class="relative-container">
            <input type="password" id="password" name="password"><br>
            <span class="eye-icon" onclick="togglePasswordVisibility()">👁️</span>
            </div>
            <br>

        <!-- //联网按键 -->
        <!-- <button id="positionconfig" >BackPositionConfigration</button> -->
        <button id="connectwifi" >ConnectWiFi</button>
        
      </form>

      <form id="backForm">

        <button id="positionconfig" style="margin-top: 10px;">BackPositionConfiguration</button>

      </form>

      <form id="resetwifi" onsubmit="RestWifi(event)">
        <!-- 在这个位置添加重置按钮 -->
        <button id="resetWifi" style="margin-top: 10px;" >WIFI REST</button>

      </form>
    </div>

    <script>
      // 获取按钮元素
      const BackPositionCfgButton = document.getElementById('positionconfig');

      // 为按钮添加点击事件处理函数
      BackPositionCfgButton.addEventListener('click', function () {
        // 阻止表单默认提交行为（如果有的话）
        event.preventDefault();

        // 设置要跳转的目标URI
        const targetUri = '/';

        // 执行页面跳转
        window.location.href = targetUri;
      });

      // Load JSON data for populating dropdowns
      function togglePasswordVisibility() {
          var passwordInput = document.getElementById('password');
          if (passwordInput.type === 'password') {
              passwordInput.type = 'text';
          } else {
              passwordInput.type = 'password';
          }
      }

      function ConnectWifi(event) {
       
        event.preventDefault();
        var ssid = document.getElementById('ssid').value;
        var password = document.getElementById('password').value;
        console.log('SSID: ', ssid, 'Password: ', password);
        
        // Send data as a single JSON response
        alert("Form ConnectWifi! Check the console for ConnectWifi data.");

        send_WIFI_CONFIG_Data();
      }

    const ws_client = new WebSocket("ws://"+window.location.host+"/ws"); 
    
    ws_client.onopen = function () {
      console.log("WebSocket connection established.");
    };
    ws_client.onerror = function (error) {
      console.error("WebSocket error: ", error);
    };
    ws_client.onclose = function () {
      console.log("WebSocket connection closed.");
    };


    function RestWifi() { 
      event.preventDefault();

      var ssidInput = document.getElementById('ssid');
            var passwordInput = document.getElementById('password');
            if (ssidInput) {
                ssidInput.value = '';
            }
            if (passwordInput) {
                passwordInput.value = '';
            }
        
        // Send data as a single JSON response
        alert("Form ConnectWifi! Check the console for ConnectWifi data.");

        send_WIFI_RESET_Data();
    }

    function send_WIFI_CONFIG_Data() { 
      var data = {  
      ssid: document.getElementById("ssid").value,  
      password: document.getElementById("password").value,  
      };  
      if (ws_client.readyState === WebSocket.OPEN) {
        ws_client.send(JSON.stringify(data));  // 整体一起发送提高了发送的稳定性
      } else {
        console.error("WebSocket connection not open. Unable to send data.");
      }ent.send(JSON.stringify(data));
      
    }

    function send_WIFI_RESET_Data() { 
      var data = {  
      ssid: '',  
      password: '',  
      };  
      if (ws_client.readyState === WebSocket.OPEN) {
        ws_client.send(JSON.stringify(data));  // 整体一起发送提高了发送的稳定性
      } else {
        console.error("WebSocket connection not open. Unable to send data.");
      }ent.send(JSON.stringify(data));
      
    }


    </script>
  </body>
</html>
